<template>
  <div>
    <slot name="activator" :props="activatorProps" :expanded="expanded"></slot>
    <slot name="content" v-if="expanded"></slot>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const expanded = ref(false);

const activatorProps = ref({
  onclick: () => {
    expanded.value = !expanded.value
  }
})
</script>